<!-- 供应商联系人 -->
<template>
  <div class="base-info">
    <a-space
      :style="{
        marginBottom: '20px',
      }"
    >
      <a-button
        :style="{
          height: '40px',
        }"
        type="primary"
        @click="showModal"
      >
        <template #icon>
          <icon-plus />
        </template>
        <template #default>新增联系人</template>
      </a-button>
    </a-space>
    <TableTurn
      :isShowPagination="false"
      ref="tableRef"
      :tableData="getArchivesDetaliType"
      :args="args"
    >
      <a-table-column align="center" :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        title="联系人姓名"
        dataIndex="name"
        align="center"
        :width="120"
      >
      </a-table-column>
      <a-table-column
        title="头像"
        dataIndex="avatar"
        align="center"
        :width="120"
      >
        <template #cell="{}">
          <a-avatar :size="70" shape="square">Arco</a-avatar>
        </template>
      </a-table-column>
      <a-table-column
        title="联系电话"
        :width="150"
        dataIndex="phone"
        align="center"
      >
      </a-table-column>
      <a-table-column title="职务" :width="100" dataIndex="job" align="center">
      </a-table-column>
      <a-table-column
        title="部门"
        :width="100"
        dataIndex="department"
        align="center"
      >
      </a-table-column>
      <a-table-column
        title="办公地点"
        :width="300"
        dataIndex="officeLocation"
        align="center"
      >
      </a-table-column>
      <a-table-column
        title="决策作用"
        :width="200"
        dataIndex="decisionRole"
        align="center"
      >
      </a-table-column>
      <a-table-column
        :width="150"
        title="是否为首要联系人"
        dataIndex="primaryContact"
        align="center"
        :sortable="{
          sortDirections: ['descend'],
        }"
      >
        <template #cell="{ record }">
          {{ record.isPrimaryContact === 2 ? '否' : '是' }}
        </template>
      </a-table-column>
      <a-table-column
        :width="150"
        title="是否为决策关键人"
        dataIndex="primaryDecision"
        align="center"
        :sortable="{
          sortDirections: ['descend'],
        }"
      >
        <template #cell="{ record }">
          {{ record.isKeyDecisionMakers === 2 ? '否' : '是' }}
        </template>
      </a-table-column>

      <a-table-column align="center" :width="300" fixed="right" title="操作">
        <template #cell="{ record }">
          <a-button type="text" @click="goEdit(record)">编辑</a-button>
          <a-button type="text" @click="dalete(record.id)">删除</a-button>
        </template>
      </a-table-column>
    </TableTurn>
    <addContact
      :title="title"
      v-model:visible="isShowModal"
      @addContactEmit="addContactEmit"
      :detailInfo="currDetailInfo"
    ></addContact>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { IClientAddContact } from '@/types/order';
  import {
    GetArchivesDetaliType,
    PostSupplierContact,
    EditSupplierContact,
    DeleteSupplierContact,
  } from '@/api/buy-management/archives-details/index';
  import addContact from './components/add-contact/index.vue';

  const route = useRoute();

  const title = ref('新建联系人');
  const tableRef = ref();
  const getArchivesDetaliType = async () => {
    try {
      const res = await GetArchivesDetaliType({
        id: Math.floor(route.query.id),
        typeId: 2,
      });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getArchivesDetaliType();

  let isShowModal = ref(false);
  const clientId = 2;

  let currDetailInfo = ref<any>({
    name: '', // 联系人名称
    phone: '', // 联系电话
    job: '', // 职务
    department: '', // 部门
    officeLocation: '', // 办公地点
    decisionRole: '', // 决策作用
    isPrimaryContact: '0', // 是否为首要联系人， 0为否， 1为是
    isKeyDecisionMakers: '0', // 是否为决策关键人， 0为否， 1为是
    avatar: '', // 头像
    customerId: clientId,
  }); // 储存当前点击表格编辑哪一行的数据

  const showModal = () => {
    currDetailInfo.value = {
      name: '', // 联系人名称
      phone: '', // 联系电话
      job: '', // 职务
      department: '', // 部门
      officeLocation: '', // 办公地点
      decision: '', // 决策作用
      isPrimaryContact: '0', // 是否为首要联系人， 0为否， 1为是
      isKeyDecisionMakers: '0', // 是否为决策关键人， 0为否， 1为是
      avatar: '', // 头像
      customerId: clientId,
    };
    isShowModal.value = true;
  };

  const addContactEmit = async (from, id) => {
    if (id === 'add') {
      await PostSupplierContact({
        ...from,
        supplierId: Number(route.query.id),
      });
      tableRef.value.loadData();
    } else {
      await EditSupplierContact({
        ...from,
        supplierId: Number(route.query.id),
      });
      tableRef.value.loadData();
    }
  };

  const goEdit = (val) => {
    title.value = '编辑联系人';
    currDetailInfo.value = val;
    isShowModal.value = true;
  };

  const dalete = async (id) => {
    const res = await DeleteSupplierContact({ id });
    tableRef.value.loadData();
  };
</script>

<style scoped lang="less">
  .base-info {
    padding: 0px 40px 100px;
  }
</style>
